// Fuelux 
// --------------------------------------------------

/* spinner */
.spinner-buttons.btn-group-vertical .btn {
  margin: 0;
  height: 17px;
  width: 22px;
  font-size: 10px;
} 

/* wizard */
@wizard-step-border:@default-border-color;
@wizard-step-color:@gray-light;
@wizard-step-active-border:@themeColor;
@wizard-step-complete-color:@themeColor;
@wizard-step-title-color:@gray-light;
@wizard-step-active-title-color:@gray;

.wizard-steps  {
	list-style:none;
	display:table;
	width:100%;
	padding:0;
	margin:0;
	position:relative;
	
	li {
		display:table-cell;
		text-align:center;
		width:1%;

		.step {
			border:3px solid @wizard-step-border;
			color:@wizard-step-color;
			font-size:@baseFontSize + 2;
			border-radius:100%;
			background-color:@white;
			 
			position:relative;
			z-index:2;
			display:inline-block;
			
			width:40px; height:40px;
			line-height:32px;
			text-align:center;
		}
		
		
		&:before {/* the line running through each step*/
			 display:block;
			 content:"";

			 width:100%;
			 height:1px; font-size:0; overflow:hidden;
			 
			 border-top:4px solid @default-border-color;
			 
			 position:relative; top:21px;
			 z-index:1;
		}
		
		&:last-child:before  {
			max-width:50%;
			width:50%;
		}
		&:first-child:before {
			max-width:51%;
			left:50%;
		}
		
		
		&.active, &.complete {
			&:before, .step {
				border-color:@wizard-step-active-border;
			}
		}
		
		&.complete {
			.step {
				cursor:default;
				color:@white;
				
				&:before {
					display:block;
					position:absolute;
					top:0; left:0; bottom:0; right:0;
					line-height:32px; text-align:center;
					border-radius:100%;
					 
					content:"\f00c";

					background-color:@white;
					z-index:3;
					 
					font-family:FontAwesome;
					font-size:17px;
					color:@wizard-step-complete-color;
				}
				
				.transition(~"transform ease 0.1s");
			}
			&:hover {
				.step {
					.transform(~"scale(1.1)");
					//border-color:lighten(@wizard-step-active-border , 12%);
					cursor: pointer;
				}
				&:before {
					//border-color:lighten(@wizard-step-active-border , 12%);
				}
			}
		}
		
		
		.title{
			display:block;
			margin-top:4px;
			max-width:100%;
			 
			color:@wizard-step-title-color;
			font-size:14px;
			 
			z-index:104;
			 
			text-align:center;
			table-layout:fixed;
			 
			word-wrap:break-word;
		}
		&.complete .title , &.active .title{
			color:@wizard-step-active-title-color;
		}

		
		
	}
	
}

.step-content .step-pane {
  display: none;
  min-height:75px;
  padding:4px 8px 12px;
  margin-top: 15px;
}

.step-content .active {
  display: block;
}

.wizard-actions {
 text-align:right;
 
 &.btn-group, &.ui-group-buttons {
	 float:right;
 }
}

@media only screen and (max-width: 460px) {
 .wizard-steps li .step {
	width:30px; height:30px; line-height:24px;
	border-width:3px;
 }
 .wizard-steps li:before  , .wizard-steps li:after {
	border-width:3px;
 }
 .wizard-steps li.complete .step:before{
	line-height:24px;
	font-size:13px;
 }
 .wizard-steps li:before {
	top:16px;
 }
 
 .step-content .step-pane {
	padding:4px 4px 6px;
 }
}



